<template>
  <el-dialog
    :title="dialogTitle"
    v-model="localVisible"
    width="30%"
    @close="closeDialog"
    @open="openDialog"
  >
    <div v-if="List.length">
      <el-table
        :data="List"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="用户id"
        />
        <el-table-column
          prop="nam"
          label="用户名"
        />
      </el-table>
    </div>
    <div v-else>
      <p>暂无关注</p>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="closeDialog">关闭</el-button>
    </span>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total"
      class="pagination"
    />
  </el-dialog>
</template>
  
  <script>
import { ref, watch } from 'vue';
import { get } from "@/net";

export default {
  name: "List",
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    listtype: {
      type: Int16Array,
      required: true,
    },
  },
  emits: ["update:visible"],
  setup (props, { emit }) {
    const List = ref([]);
    const total = ref(0);
    const currentPage = ref(0);
    const pageSize = ref(10);
    const dialogTitle = ref("dsada");
    // 获取关注列表数据
    const fetchList = async () => {
      get(
        "/account/get_concern_info", {},
        (message) => {
          console.log(message.data);
          List.value = message.data.userdata; // 鍋囪杩斿洖鐨勬暟鎹粨鏋勪腑鏈?? items 瀛楁??
          total.value = message.data.total;
        },
        () => {
          store.clearAccount();
        }
      );
    };
    // 定义本地的 visible 状态
    const localVisible = ref(props.visible);

    // 监听 props.visible 的变化来更新本地状态
    watch(() => props.visible, (newVal) => {
      localVisible.value = newVal;
    });


    const closeDialog = () => {
      List.value = [];
      localVisible.value = false;
      emit("update:visible", false);
    };
    const openDialog = () => {
      if (props.listtype == 0) dialogTitle.value = "关注列表";
      else dialogTitle.value = "粉丝列表";
      fetchList();
    };

    const handlePageChange = (page) => {
      currentPage.value = page;
      console.log('当前第几页:', page);
      fetchList();
    };

    return {
      localVisible,
      closeDialog,
      openDialog,
      dialogTitle,
      fetchList, List, total,
      handlePageChange, currentPage, pageSize
    };
  },
};
  </script>
  
  <style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.pagination {
  height: 10%;
  display: flex;
  justify-content: center;
}
</style>
  